<template>
  <view class="category">
    <!-- 搜索框的位置 -->
    <UgoSearch></UgoSearch>
    <!-- 内容 -->
    <view class="main">
      <!-- 左侧 -->
      <view class="menus">
        <view
          class="menus-item"
          :class="current === index ? 'active' : ''"
          v-for="(item, index) in menus"
          :key="item"
          @click="handleClick(index)"
          >{{ item }}
        </view>
      </view>
      <!-- 右侧 -->
      <view class="content">
        <view class="group" v-for="item1 in contents" :key="item1.cat_id">
          <view class="group-title">{{ item1.cat_name }} </view>
          <view class="group-content">
            <navigator
              :url="`/pages/goods_list/goods_list?cid=${item2.cat_id}`"
              v-for="item2 in item1.children"
              :key="item2.cat_id"
            >
              <u-image :src="item2.cat_icon" mode="widthFix"> </u-image>
              <view>{{ item2.cat_name }}</view>
            </navigator>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      menus: [], // 左侧内容
      contents: [], // 右侧内容
      current: 0, // 下标
    };
  },
  onLoad() {
    this.getCategories();
  },
  methods: {
    async getCategories() {
      const result = await this.$u.get("/categories");
      // console.log(result);
      this.getCategory = result.message;
      this.menus = this.getCategory.map((v) => v.cat_name);
      this.contents = this.getCategory[0].children;
    },
    // 点击左侧菜单事件
    handleClick(index) {
      this.current = index; // 切换选中标题
      // 切换右侧显示的内容
      this.contents = this.getCategory[index].children;
    },
  },
};
</script>

<style lang="scss">
.category {
  .main {
    height: calc(100vh - 84rpx);
    display: flex;
    .menus {
      overflow: auto;
      width: 182rpx;
      .menus-item {
        height: 70rpx;
        font-size: 28rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .active {
        color: #eb4450;
      }
    }
    .content {
      flex: 1;
      overflow: auto;
      .group-title {
        height: 70rpx;
        font-size: 28rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        &::before {
          content: "/";
          margin-right: 10rpx;
        }
        &::after {
          content: "/";
          margin-left: 10rpx;
        }
      }
      .group-content {
        display: flex;
        flex-wrap: wrap;
        padding: 0 48rpx;
        // justify-content: space-around;
        // justify-content: space-between;
        // justify-content: space-evenly;
        navigator {
          width: 120rpx;
          // margin: 0 48rpx;
          margin-right: 56rpx;
        }
        // 3倍数
        navigator:nth-child(3n) {
          margin-right: 0rpx;
        }
      }
    }
  }
}
</style>